<template>
  <div class="register">
    <h3 class="register-header">欢迎注册</h3>
    <p v-show="showTishi" style="color: red;text-align: center;margin-left: 38px">{{tishi}}</p>
    <hr style="margin-top: 23px;margin-left: 23px;"/>
    <br/>
    <div class="register-input">
      <div class="iconfont">&#xe61b;</div>
      <input type="text" placeholder="请输入用户名" class="register-input-content" v-model="username">
      <!-- 验证提示 -->

      <br/>
      <div class="iconfont">&#xe6a8;</div>
      <input type="password" placeholder="请输入密码" class="register-input-content" v-model="password">
      <!-- 验证提示 -->

      <br/>
      <div class="iconfont">&#xe6a8;</div>
      <input type="password" placeholder="请再次输入密码" class="register-input-content" v-model="password1" @click="passwordclick">
      <!-- 验证提示 -->
      <div v-if="error" class="invalid-feedback">{{error}}</div>
      <br/>
      <div class="iconfont">&#xe6a1;</div>
      <input type="text" placeholder="请输入手机号码" class="register-input-content" v-model="phone" @click="validatePhone">
      <!-- 验证提示 -->
      <div v-if="errors" class="invalid-feedback">{{errors.phone}}</div>
    </div>
    <br/>
    <button class="register-button" @click="register">Register</button>
    <router-link to="/" class="register-forget">已有帐号?,登录</router-link>

    <div class="register-footer">注册代表你已同意趣多多<span>用户协议</span>和<span>隐私政策</span></div>
  </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: 'RegisterContent',
        data () {
            return {
                username:'',
                password:'',
                password1:'',
                phone:'',
                showTishi: false,
                tishi: '',
                errors:{},
                error:''
            }
        },
        methods: {
            passwordclick () {
                if(this.password1 == this.password){
                  this.error=''
                }else{
                    this.error='两次输入的密码不一致'
                }
            },
            validatePhone() {
                //验证手机号码
                if (!this.phone) {
                    this.errors = {
                        phone: "*手机号码必填",
                    };
                    return false
                }else {
                    this.errors = {
                    }
                }
            },
            register () {
                if( this.username =="" || this.phone =="" || this.password ==""){
                    alert("您还没有注册哦！！！")
                    return;
                }
                else if (!/^1[345678]\d{9}$/.test(this.phone)) {
                    this.errors = {
                        phone: "请输入正确的手机号码",
                    }
                }else if (!0){
                    axios.post('/api/login/register.html', {
                        username: this.username,
                        password: this.password,
                        phone: this.phone
                    }).then((res) => {
                        res = res.data
                        if (res.code > 0) {
                            this.$router.push('/')
                        } else {
                            this.showTishi = true
                            this.tishi = res.msg
                        }
                    }).catch((err) => {
                        console.log(err)
                    })
                }
            }
            }
    }

</script>

<style lang="stylus" scoped>
  .register
    position relative
    width 350px
    height 500px
    text-align center
    border-radius 4px
    background-image url("../../../assets/styles/picture/login.jpg")
    .register-header
      color: #87cefa;
      font-size: 30px;
      margin-top: 27px;
      text-align: center;
      margin-left: 22px;
    .register-input
      position relative
      margin 0 auto
      margin-top 28px
      width 200px
      .register-input-content
        display block
        width 250px
        height 40px
        line-height 40px
        margin 0 auto
        margin-bottom 10px
        outline none
        border 1px solid #888
        border-radius 4px
        padding 10px
        box-sizing border-box
      .iconfont
        position absolute
        left -45px
        padding-top 4px
        font-size 32px
      .invalid-feedback
        color: red;
        padding-top: 5px;
        margin-left: -63px;
    .register-button
      width 190px
      display block
      text-align center
      margin-left 78px
      margin-top: 20px;
      height 50px
      color #fff
      font-size 26px
      border: none;
      outline: none;
      -webkit-border-radius 13px
      background-color #00a0e9
    .register-code
      margin 0 auto
      width 200px
      .code
        width:150px;
        height:40px;
        border:1px solid rgba(186,186,186,1)
        padding-left: 10px
        margin-left: -39px
        border-radius 4px
      .captcha
        cursor: pointer;
        position: relative;
        right: -115px;
        bottom: 41px;
    .register-footer
      position: relative;
      top: 157px;
      left: 17px;
      color grey
    .register-forget
      position: relative;
      top 30px
      text-decoration: none;
    .register-footer span
      color: #4d90fe;
</style>
